//引入
import Vue from "vue"
import Vuex from "vuex"

//使用vue插件
Vue.use(Vuex)

//实例化一个vuex仓库，并暴露
//给仓库传入配置（state mutation actions getters modules）
export default new Vuex.Store({
    state:{
        count: 0,
        num:0 
    },

    // 更改Vuex中的store中的状态（state）的唯一方法是提交mutation
    //Vuex 中的 mutation 非常类似于事件：每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler）
    //mutations函数会接受 state 作为第一个参数
    mutations:{
        add(state){
            state.count++
        },
        kill(state){
            state.count--
        },
        //也可以向store.commit传入额外的参数，这个参数被称为载荷，在mutations方法中第二个参数接受
        addN(state, payload){
            state.count+=payload.n
        }
    },

    // actions中方法的任务1. 执行异步操作  2. 提交mutations更新state
    //actions的方法接受一个阉割版的store作为参数,我们可以使用store上的commit方法提交mutation
    //actions的方法接受的第二个参数是dispatch时候传递的参数
    actions:{
        addWait(store){
            setTimeout(() => {
               store.commit("add")
            }, 2000);
        },
        addNWait(store,n){
            setTimeout(()=>{
                store.commit("addN",{n:n})
            },2000)
        }
    },
    getters:{

    }
})